<template>
  <view class="layout">
    <view class="navbar">
      <view class="status-bar" :style="{height:getStatusBarHeight()+'px'}"></view>
      <view class="title-bar" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
        <view class="title">{{title}}</view>
        <navigator url="/pages/search/search" class="search">
          <uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
          <text class="text">搜索</text>
        </navigator>
      </view>
    </view>
    <view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from '@/utils/system.js'

  defineProps({
    title: {
      type: String,
      default: '壁纸'
    }
  })
</script>

<style lang="scss" scoped>
  .layout {
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #fff 400rpx), linear-gradient(to right, #beecd8 20%, #f4e2d8);

      .status-bar {}

      .title-bar {
        display: flex;
        align-items: center;
        padding: 0 30rpx;

        .title {
          font-size: 22px;
          font-weight: 700;
          color: $text-color1;
        }

        .search {
          width: 220rpx;
          height: 56rpx;
          border-radius: 60rpx;
          background: rgba(255, 255, 255, 0.4);
          border: 1px solid #fff;
          margin-left: 30rpx;
          color: #999;
          font-size: 28rpx;
          display: flex;
          align-items: center;

          .icon {
            margin-left: 5rpx;
          }

          .text {
            padding-left: 10rpx;
          }
        }
      }
    }
  }
</style>